<template>
  <el-dialog
    :append-to-body="true"
    @close="closeDialog"
    :visible.sync="dialog"
    :title="is_edit?'编辑知识库':'新增知识库'"
    width="800px"
  >
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="55px">
        <el-form-item label="标题" prop="title">
          <el-input placeholder="请输入标题" v-model="form.title" style="width: 320px;" maxlength="20" />
        </el-form-item>
      </el-form>
      <vue-ueditor-wrap v-model="msg" :config="myConfig" @ready="ready" :destroy="true"></vue-ueditor-wrap>
    </div>
      <div slot="footer" class="dialog-footer">
        <el-button  size="mini" type="primary" @click="doSubmit">确认</el-button>
      </div>
  </el-dialog>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap"; // ES6 Module
import { _articleUpdate, _articleCreate, _articleShow } from "@/http/ajax";
import uploadurl from "@/http/uploadconfig";
export default {
  components: { VueUeditorWrap },
  name: "edit",
  props: {
    is_edit: {
      type: Boolean,
      required: true
    },
    cur_this: {
      type: Object,
      required: null
    }
  },
  data() {
    return {
      dialog: false,
      loading: false,
      form: { title: "" },
      msg: "",
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 260,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        serverUrl: "http://35.201.165.105:8000/controller.php",
        //  serverUrl: uploadurl.image_url,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: "/static/UEditor/"
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }]
      }
    };
  },
  created() { console.log(";;")},
  methods: {
    ready(editorInstance) {
      console.log(`编辑器实例${editorInstance.key}: `, editorInstance);
    },
    // 获取详情
    getShow(id) {
      _articleShow(
        id,
        res => {
          this.msg = res.content;
          this.dialog = true;
        },
        err => {}
      );
    },
    doSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.is_edit) {
            this.doEdit();
          } else {
            this.doCreate();
          }
        }
      });
    },
    doCreate() {
      let data = {
        content: this.msg,
        title: this.form.title,
        cid: "2"
      };
      _articleCreate(
        data,
        res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.cur_this.getList();
          this.dialog = false;
          this.loading = false;
        },
        err => {  this.loading = false;}
      );
    },
    doEdit() {
      let data = {
        content: this.msg,
        id: this.form.id,
        title: this.form.title,
        cid: "2"
      };
      _articleUpdate(
        data,
        res => {
          this.$message({
            message: "操作成功",
            type: "success"
          });
          this.cur_this.getList();
          this.dialog = false;
          this.loading = false;
        },
        err => {  this.loading = false;}
      );
    },
    closeDialog() {this.$refs["form"].resetFields();this.form = { title: "" };this.msg = ""}
  }
};
</script>

<style lang="scss">
</style>
